// pnpm install video.js@7.3.50 && pnpm install @types/video.js@7.3.50 -D
// @ts-ignore
import videoJsCore from 'video.js/dist/alt/video.core.min.js';
import 'video.js/dist/alt/video-js-cdn.min.css'
import './index.scss'
import {HeadZhiXin, HeadZhiXinOptions} from './com/Head/Head'
import type VideoJs from "video.js";

export type Player = VideoJs.Player
export const videoJs = videoJsCore as typeof VideoJs

/**
 * videoJs.registerTech()注册自定义视频类型解析
 */
export class VideoJsUtils {
  /**
   * <video ref="videoPlayer" class="video-js"></video>
   * @param el
   * @param options
   * @param ready
   */
  public static getVideoJs(el: HTMLVideoElement,
                           options?: VideoJs.PlayerOptions,
                           ready?: VideoJs.ReadyCallback
  ): Player {
    if (options) {
      options.fluid = true // 大小自适应外部
    } else {
      options = {
        fluid: true // 大小自适应外部
      }
    }
    const player = videoJs(el, options, ready);
    player.addClass('vjs-big-play-centered')
    if (options.controls) {
      player.addChild(new HeadZhiXin(player, options?.headZhiXin as HeadZhiXinOptions))
      VideoJsUtils.controlBarChange(player.controlBar)
    }
    return player
  }

  private static controlBarChange(controlBar: VideoJs.ControlBar) {
    // 获取根节点
    const root = controlBar.el()
    // 创建第一行元素
    const firstControlBarLine = document.createElement('div');
    firstControlBarLine.setAttribute('class', 'vjs-firstControlBarLine-control-bar')
    let addFirstControlBarLine = false
    // 创建第二行元素
    const firstControlBarLine2 = document.createElement('div');
    firstControlBarLine2.setAttribute('class', 'vjs-firstControlBarLine2-control-bar')
    let addFirstControlBarLine2 = false
    // {name: 'currentTimeDisplay'}, // 当前时间
    const currentTimeDisplay = root.getElementsByClassName('vjs-current-time vjs-time-control vjs-control').item(0);
    if (currentTimeDisplay) {
      firstControlBarLine.appendChild(currentTimeDisplay)
      addFirstControlBarLine = true
    }
    // {
    //           name: 'progressControl',
    //           seekBar: true,
    //         }, // 播放进度条
    const vjsProgressControl = root.getElementsByClassName('vjs-progress-control vjs-control').item(0);
    if (vjsProgressControl) {
      firstControlBarLine.appendChild(vjsProgressControl)
      addFirstControlBarLine = true
    }
    // {name: 'durationDisplay'}, // 总时间
    const durationDisplay = root.getElementsByClassName('vjs-duration vjs-time-control vjs-control').item(0);
    if (durationDisplay) {
      firstControlBarLine.appendChild(durationDisplay)
      addFirstControlBarLine = true
    }
    // 过滤其他元素
    const barLines = [firstControlBarLine, firstControlBarLine2]
    const otherChilds = Array.from(root.children).filter(i => {
      const find = barLines.find(f => f === i)
      return !find;
    })
    // 其他元素加入第二行
    otherChilds.forEach(i => {
      addFirstControlBarLine2 = true
      firstControlBarLine2.appendChild(i)
    })
    if (addFirstControlBarLine) {
      root.appendChild(firstControlBarLine)
    }
    if (addFirstControlBarLine2) {
      root.appendChild(firstControlBarLine2)
    }
  }

  public static dispose(player: Player) {
    if (player) {
      player.dispose()
    }
  }
}
